<template>
	<div class="notify" v-if="msg" :style="{color:color,backgroundColor:bgColor}">
		<p>{{msg}}</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//通知文本
				msg: "",
				//文本颜色
				color: "#fff",
				//背景颜色
				bgColor: "#090"
			}
		},
		methods: {
			//显示通知
			show(msg,bgColor='#090',color='#fff') {
				this.msg = msg;
				this.bgColor = bgColor;
				this.color = color;
				setTimeout(() => {
					this.hide();
				}, 2000)
			}
		},
		hide() {
			this.msg = "";
		},
		//成功
		success(msg){
			this.show(msg,'#090')
		},
		//失败
		danger(msg){
			this.show(msg,'#ff5500')
		},
		//警告
		warning(msg){
			this.show(msg,'#ffd606')
		}
	}
</script>

<style scoped="scoped">
	.notify {
		height: 44px;
		line-height: 44px;
		position: fixed;
		width: 100vw;
		left: 0;
		top: 0;
		text-align: center;
	}
</style>
